<script lang="ts" setup>
import { useMemberStore } from '@/stores'
import { ref } from 'vue'

const props = defineProps<{
  qrcodeUrl: string
}>()
const memberStore = useMemberStore()

const popupRef = ref<{
  open: () => void
  close: () => void
}>()
const open = () => {
  popupRef.value?.open()
}
const close = () => {
  popupRef.value?.close()
}
const popupChange = (ev: any) => {
  if (!ev.show) {
    emits('refresh') // 关闭弹窗并且清空所有多选
  }
}
const emits = defineEmits(['refresh'])
defineExpose({
  open,
  close,
})
</script>
<template>
  <uni-popup ref="popupRef" type="center" @change="popupChange" :animation="true">
    <view class="qrcodeBox">
      <view class="_qrcode">
        <!-- 二维码显示 -->
        <uqrcode ref="qrcodeRef" canvas-id="qrcode" :value="props.qrcodeUrl"></uqrcode>
        <view class="mobileNumber">{{ memberStore.userInfo?.mobile.slice(-4) }}</view>
      </view>
      <view @tap.stop="popupRef?.close()" class="iconfont icon_Frame-1"></view>
    </view>
  </uni-popup>
</template>
<style lang="scss">
.qrcodeBox {
  ._qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 66rpx 50rpx 30rpx;
    border: 1px solid #000;
    border-radius: 16rpx;
    background-color: #fff;
    .mobileNumber {
      margin-top: 20rpx;
      height: 102rpx;
      line-height: 102rpx;
      font-size: 80rpx;
      letter-spacing: 8rpx;
      color: #000;
    }
  }
  .iconfont {
    color: #fff;
    margin-top: 32rpx;
    text-align: center;
    font-size: 68rpx;
  }
}
</style>
